<template>
  <div>
    <el-form label-width="80px" :rules="rules" :model="params" ref="editForm" size="small">
      <el-form-item label="上级菜单">
        <perm v-model="params.pid"></perm>
      </el-form-item>
      <el-form-item label="菜单名称" prop="name">
        <el-input placeholder="请输入名称，例:系统管理" v-model="params.name" class="input-with-select">
        </el-input>
      </el-form-item>
      <el-form-item label="菜单代码" prop="code">
        <el-input placeholder="请输入权限代码，例:sysmanagement" v-model="params.code"></el-input>
      </el-form-item>
      <el-form-item label="页面地址">
        <el-input placeholder="请输入权限URL，例:/sys/login" v-model="params.url"></el-input>
      </el-form-item>
      <el-form-item label="图标" v-if="params.type==='menu'">
        <icon-select v-model="params.btnClass"></icon-select>
      </el-form-item>
      <el-form-item label="菜单排序">
        <el-input-number v-model="params.sort" :min="1" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch
          v-model="params.state"
          :active-value='1'
          :inactive-value='0'
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="启用"
          inactive-text="禁用">
        </el-switch>
      </el-form-item>
      <el-form-item label=" ">
        <div>
          <el-button type="primary" :loading="loading" @click="save">保 存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import Perm from '../../common/PermissionSelect'
  import IconSelect from '../../common/IconsSelect'

  export default {
    name: "AddEditPermPage",
    components: {
      Perm,
      IconSelect
    },
    props: ['data'],
    watch: {
      data: {
        handler() {
          this.queryInfo();
        },
        immediate: true,
        deep: true
      }
    },
    data() {
      return {
        isEdit: false,
        loading: false,
        params: {
          id: '',
          name: '',
          type: 'menu',
          url: '',
          code: '',
          pid: '0',
          btnClass: '',
          sort: 99,
          state: 1
        },
        rules: {
          type: [
            {required: true, message: '未选择权限类型', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '权限名称不能为空', trigger: 'blur'}
          ],
          code: [
            {required: true, message: '权限代码不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      queryInfo() {
        if (this.data) {
          this.api.post('/bucket-system/system/resources/info', {id: this.data.id})
            .then((result) => {
              let d = result.data;
              for (let k in this.params) {
                this.params[k] = d[k] ? d[k] : null;
              }
              this.isEdit = true;
            });
        } else {
          for (let k in this.params) {
            this.params[k] = '';
          }
          this.params.type = 'menu';
          this.params.pid = '0';
          this.params.sort = 99;
          this.params.state = 1;
          this.isEdit = false;
        }
      },
      save: function () {
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            let _url = '';
            if (!this.isEdit) {
              _url = '/bucket-system/system/resources/add';
            } else {
              _url = '/bucket-system/system/resources/update';
            }
            this.loading = true;
            this.api.post(_url, this.params)
              .then((data) => {
                this.loading = false;
                if (data.code === 200) {

                  this.visible = false;
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  });

                  this.$emit('complete');
                } else {
                  this.$message.error(data.data);
                }
              }).catch((error) => {
              this.loading = false;
            });
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-input-group__prepend .el-select {
    width: 100px;
  }
</style>
